<template>
	<view class="control" v-if="venueDetail.id">
		<view class="box-1">
			<!-- <image mode="widthFix"
				src="https://oss.szsportscenter.cn/img/446d465efb748ce2d552b288c16fa332ac428895.png">
			</image> -->
			<!-- <QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar> -->
			<view class="postion">
			</view>
		</view>


		<!-- 门票购买 -->
		<view class="box-2">
			<!-- 赛事报名 -->
			<view class="data-list2" v-if="menuActive == '8'">
				<view class="loap" v-if="list1.length<5">
					<u-sticky>
						<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
							:inactiveStyle="{color: '#666666',}" lineColor="#4BA677" itemStyle="height: 38px;"
							@click=" tabClick"></u-tabs>
					</u-sticky>
				</view>
				<view v-else>
					<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
						:inactiveStyle="{color: '#666666',}" lineColor="#4BA677" itemStyle="height: 38px;"
						@click=" tabClick"></u-tabs>
				</view>
				<view class="scroll" style="height: 88vh;
				background-color: #fff;border-radius: 8rpx;margin-top: 20rpx;">
					
					
					<view class="data-item flex-align" v-for="(item, index) in products" :key="index"
						@click="ondatalist4(item, index)">
						<view class="image">
							<u--image :src="item.withActivity.index_img" width="256rpx" height="160rpx" radius="5"></u--image>
						</view>
						<view class="detail">
							<view style="margin-top: 20rpx;">
								<view class="title ellipsis-1"><text>
										{{ item.race_name }}</text> </view>
								<!-- <view class="tag-list flex-align">
									<view v-if="item.venues_project[0].name != undefined" class="tag">
										{{item.venues_project[0].name}}
									</view>
									<view v-if="item.venues_project[1].name != undefined" class="tag">
										{{item.venues_project[1].name}}
									</view>
									<view v-if="item.venues_project[2].name != undefined" class="tag">
										{{item.venues_project[2].name}}
									</view>
									<view v-if="item.venues_project[3].name != undefined" class="tag">
										{{item.venues_project[3].name}}
									</view>
								</view> -->
								<view class="price-2">{{ item.subtitle }}</view>
							</view>
							
						</view>
					</view>
					<view v-if="products.length === 0" style="position: absolute;top: 200rpx; left: 30%;">
						<u-empty mode="list" text="暂无类目,看看其他商品吧~" :icon="icon1">
						</u-empty>
					</view>
				</view>
			</view>
			
			
			<!-- <view class="data-list9" v-if="menuActive == '8'">
				<view class="loap" v-if="list1.length<5">
					<u-sticky>
						<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
							:inactiveStyle="{color: '#666666',}" lineColor="#4BA677" itemStyle="height: 38px;"
							@click=" tabClick"></u-tabs>
					</u-sticky>
				</view>
				<view v-else>
					<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
						:inactiveStyle="{color: '#666666',}" lineColor="#4BA677" itemStyle="height: 38px;"
						@click=" tabClick"></u-tabs>
				</view>

				<scroll-view scroll-y class="scroll">
					<view class="data-item" v-for="(item, index) in products" :key="index"
						@click="ondatalist4(item, index)">
						<view class="image">
							<u--image :src="item.withActivity.index_img" radius="7" width="100%"
								height="330rpx"></u--image>
						</view>
						<view class="title"> {{ item.race_name }} </view>
						<view class="count-down flex-between" style="color: rgb(190,190,190);font-size: 22rpx;">
							<text>{{ item.subtitle }}</text>
						</view>
					</view>
					<view v-if="products.length === 0" style="position: absolute;top: 200rpx; left: 30%;">
						<u-empty mode="list" text="暂无类目,看看其他商品吧~" :icon="icon1">
						</u-empty>
					</view>
				</scroll-view>
			</view> -->

			<!-- <view v-if="products.length === 0" style="position: absolute;top: 400rpx; left: 30%;">
				<u-empty mode="list" text="暂无类目,看看其他商品吧~"
					:icon="icon1">
				</u-empty>
			</view> -->
		</view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	// import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			QSNavbar,
			// uniRate,
		},
		data() {
			return {
				icon1: this.$https.assetsPath + '58d1bf2665b8c20e302f02c56274f0ce972df8b4.png',
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "center",
						width: 15,
						doEvent: "back",
						iconColor: "#000000",
					},
					{
						type: "text",
						text: "",
						width: 70,
						weight: "bold",
						color: "#000000",
						textAlign: "left",
					},
				],
				list1: [],
				list2: [{
						name: "余氯含量"
					},
					{
						name: "PH值"
					},
					{
						name: "水温"
					},
					{
						name: "温度"
					}
				],
				venueDetail: {},
				timeData: {},
				menuActive: '',
				products: [],
				id: 0,
				belong: '',
				time_list: '',
				each_num: {
					open_time_start: '',
					open_time_end: '',
				},
				windows: '',
				venueDetaillist: [],
				belonglist: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				index_list: {},
				tabindex: 0
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.belong = options.belong;
			this.menuActive = options.menuActive;
			this.getVenueDetail(options.id);
			if (this.belong == 'train') {
				uni.setNavigationBarTitle({
					title: '课程培训'
				});
			} else if (this.belong == 'enroll') {
				uni.setNavigationBarTitle({
					title: '赛事报名'
				});
			}

		},
		methods: {
			// 获取场馆详情
			async getVenueDetail(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'top'
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.venueDetail = result.data;
					this.navbarItems_1[1].text = this.venueDetail.venue_name;
					this.windows = result.data.windows
					this.getDetaillist(this.id, 0)
				}
			},
			// async getVenuelist(id, index = 0) {
			// 	let postData = {
			// 		shop_id: id,
			// 		project_id: getApp().globalData.projectId,
			// 		app_id: this.$https.weixinAppId,
			// 		block: 'window',
			// 		windows: this.windows
			// 	};
			// 	let result = await venues.getShopIndex(postData);
			// 	if (result.code === 1) {
			// 		this.venueDetaillist = result.data.windows;
			// 		this.menuActive = result.data.windows[0].name_sign
			// 		let item = this.venueDetaillist[0];
			// 		this.getDetaillist(item, this.id, 0)
			// 	}
			// },
			async getDetaillist(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'cate',
					belong: this.belong,
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.list1 = result.data.cates;
					this.getcatelist(this.list1[0].id)
				}
			},
			async getcatelist(id) {
				let that = this;
				if (this.listQuery.pageNo === 1) that.ordersList = [];
				let postData = {
					shop_id: this.id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'products',
					belong: this.belong,
					cate_id: id,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					// this.products = result.data.products.data
					that.products = that.products.concat(result.data.products.data); //将数据拼接在一起
					that.totalPage = result.data.products.last_page
				}
			},
			// 滚动加载
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getcatelist(this.list1[0].id)
			},
			// 之前详情
			openStoreDetail() {
				// uni.navigateTo({
				// 	url: "/page_points/storeDetail/storeDetail",
				// });
				uni.navigateTo({
					url: "/pages_other/venue_details/venue_details?venues_id=" + this.id,
				});
			},
			onChange(e) {
				this.timeData = e;
			},
			openDetail() {
				uni.navigateTo({
					url: "/pages/index/coach/coachDetail",
				});
			},
			onlist() {
				// this.tabClick()
			},
			//切换菜单
			// changeMenu(item, index, nameSign) {
			// 	this.listQuery.pageNo = 1
			// 	this.products = []
			// 	this.list1 = []
			// 	this.menuActive = nameSign;
			// 	this.getDetaillist(item, this.id, index);

			// },
			tabonClick(index) {
				this.tabindex = index.index
			},
			tabClick(index) {
				this.products = []
				this.listQuery.pageNo = 1
				this.index_list = index
				this.getcatelist(index.id)
			},
			cdClick(item) {
				var _this = this
				var now = new Date()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				this.time_list = h + ':' + min
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					product_id: item.id
				};
				train.getCourtProduct(data).then(result => {
					let open_time_end = result.data.result.open_time_end
					let open_time_start = result.data.result.open_time_start
					let tip = result.data.result.tip
					if (this.time_list > open_time_start && this.time_list < open_time_end) {
						if (uni.getStorageSync("openid") == '' || uni.getStorageSync("openid") == null) {
							uni.showToast({
								title: '请登录！',
								icon: 'none',
								duration: 850
							});
							// setTimeout(() => {
							// 	uni.reLaunch({
							// 		url: '/pages/personal/personal'
							// 	})
							// }, 1000)
						} else {
							uni.navigateTo({
								url: './stadium/stadium?id=' + item.id +
									"&court_id=" +
									item.id +
									"&name=" +
									item.court_name +
									'&venue_id=' +
									this.venueDetail.id +
									'&windows=' +
									item.windows
							})
						}

					} else {
						uni.showModal({
							// title: data[1],
							content: tip,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {}
							}
						});
					}
				})

			},
			addresslist() {
				uni.openLocation({
					latitude: Number(this.venueDetail.lat), //要去的纬度-地址
					longitude: Number(this.venueDetail.lng), //要去的经度-地址
					address: this.venueDetail.address, //要去的具体地址

					//此处踩坑的问题2：
					//latitude 和 longitude的值一定要是number类型。
					//所以传递的时候需要使用Number将其转换一下。
				})
			},
			ondatalist1(item, index) {
				uni.navigateTo({
					url: './ticketModule/ticketModule?id=' + item.id +
						"&venue_name=" +
						this.venueDetail.venue_name +
						'&venue_id=' +
						this.venueDetail.id
				})
			},
			ondatalist2(item, index) {
				uni.navigateTo({
					url: './memberCard/memberCard?id=' + item.id +
						"&venue_name=" +
						this.venueDetail.venue_name +
						'&venue_id=' +
						this.venueDetail.id
				})
			},
			ondatalist3(item, index) {
				uni.navigateTo({
					url: '/pages_other/train/train?id=' + item.id +
						"&venue_name=" +
						this.venueDetail.venue_name +
						'&venue_id=' +
						this.venueDetail.id +
						'&train_enum_id=' +
						item.train_enum_id
				})

			},
			ondatalist4(item, index) {
				uni.navigateTo({
					url: '/pages/race/race?id=' + item.id +
						"&venue_name=" +
						this.venueDetail.venue_name +
						'&venue_id=' +
						this.venueDetail.id +
						'&cate_type=' +
						item.cate_type +
						'&windows=' +
						item.windows
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		// min-height: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.box-1 {
		position: relative;
		width: 100%;

		>image {
			display: block;
			width: 100%;
		}

		.postion {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			box-sizing: border-box;
		}

		.box-1-con {
			image {
				display: block;
				width: 100%;
			}

			.box-1-dian {
				height: 120rpx;
				padding: 0px 30rpx;
				margin-top: 19rpx;

				.image {
					width: 160rpx;
					height: 100%;
					// overflow: hidden;

					image {
						border-radius: 10rpx;
						width: 100%;
						height: 100%;
					}
				}

				.dian-info {
					margin-left: 20rpx;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;

					.title {
						color: rgb(255, 255, 255);
						font-size: 33rpx;
						font-weight: 700;
					}

					/deep/ .u-tag-wrapper {
						margin-right: 20rpx;

						.u-tag {
							border-radius: 17px;
							font-size: 26rpx;
							height: 40rpx;
							padding: 0px 15rpx;
						}
					}

					.desc {
						color: rgb(255, 255, 255);
						font-size: 22rpx;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 380rpx;
					}
				}

				.btn {
					color: rgb(255, 255, 255);
					background-color: #F7E9CC;
					border-radius: 17px;
					font-size: 26rpx;
					height: 40rpx;
					padding: 0px 15rpx;
					// padding: 5rpx 20rpx;
					margin-top: 60rpx;
					color: #675034;
					line-height: 40rpx;
				}
			}
		}

		.box-2-con {
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 0px 30rpx;

			.list {
				display: flex;
				overflow-x: auto;
				border-radius: 20rpx;
				background-image: url("https://oss.szsportscenter.cn/img/7a2e7ef51359cc5e18cbee07dc7fb1bc5230398b.png");
				background-repeat: no-repeat;
				padding-bottom: 40rpx;
				background-size: 100% calc(100% - 40rpx);

				.active {
					font-weight: 700;

					text {
						font-size: 22rpx !important;
						margin-top: 20rpx !important;
					}

					.jian {
						opacity: 1 !important;
					}
				}

				.item {
					height: 130rpx !important;
					flex-shrink: 0;
					width: 140rpx;
					padding: 23rpx 0rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					position: relative;

					.icon {
						width: 50rpx;
						height: 50rpx !important;
					}

					text {
						margin-top: 18rpx;
						font-size: 20rpx;
					}

					.jian {
						position: absolute;
						width: 50rpx;
						transition: all 0.3s;
						height: 30rpx;
						opacity: 0;
						bottom: -20rpx;
					}
				}
			}
		}
	}

	.box-2 {
		// padding: 0px 30rpx;
		// padding: 0px 10rpx;
		// margin-left: 20rpx;
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// transform: translateY(-60rpx);
		// margin-top: 50rpx;
		// margin-right: 20rpx;
		border-radius: 10rpx;

		>view {
			flex: 1;
			height: 0;

			.scroll {
				// height: calc(100% - 40rpx);
				// height: 100%;
			}
		}

		// 列表1
		.data-list1 {
			margin-top: 20rpx;

			.write {
				width: 690rpx;
				height: 90rpx;
				background: linear-gradient(135deg, #F5FFFB 0%, #CCF0E0 100%, #FFFFFF);
				border-radius: 12rpx 12rpx 0rpx 0rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1rpx solid #CCF0E0;

				.wri_img {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}

				.wri_tex {
					font-size: 28rpx;
					color: #4BA677;
					margin-left: 10rpx;
				}
			}

			.onadd {
				// /deep/.u-tabs {
				// 	background-color: #fff;
				// 	// margin: 0 20rpx;

				// 	.u-tabs__wrapper__nav__item {
				// 		flex: 1;
				// 	}

				// 	.u-tabs__wrapper__nav__line {
				// 		bottom: 0;
				// 	}
				// }
			}


			.ph_write {
				width: 690rpx;
				height: auto;
				background: #FFFFFF;
				// box-shadow: 0rpx -2rpx 15rpx 0rpx rgba(223,182,134,0.31);
				border: rgba(75, 166, 119, 0.4);
				border-radius: 0rpx 0rpx 10rpx 10rpx;
				margin-bottom: 20rpx;


				/deep/.u-tabs {
					background-color: #fff;
					// margin: 0 30rpx;

					.u-tabs__wrapper__nav__item {
						flex: 1;
					}

					.u-tabs__wrapper__nav__line {
						bottom: 0;
					}
				}
			}



			.data-item {
				margin-top: 20rpx;
				height: 210rpx;
				width: 690rpx;
				background-color: #ffffff;
				padding: 10rpx;
				border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				border-radius: 6rpx;
				box-shadow: 30px 2px 10px #f9f9f9;

				.image {
					padding-left: 10rpx;
					width: 180rpx;
					height: 180rpx;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 180rpx;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						font-weight: bold;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							// background-color: #abc6fa;
							margin-right: 10rpx;
							border: 1rpx solid #4BA677;
						}
					}

					.tiemr {
						color: #cfcfcf;
						font-size: 22rpx;
					}

					.price {
						font-size: 36rpx;
						color: #4BA677;
						font-weight: bold;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #cfcfcf;
						font-size: 22rpx;
						text-decoration: line-through;
					}
				}
			}
		}

		//列表2
		.data-list2 {
			background-color: #EDF5F5;
			// .scroll {
			// 	height: 100%;
			// 	background-color: #fff;
			// 	display: flex;
			// 	justify-content: center;
			// 	flex-direction: column;
			// 	align-items: center;
			// }
			.loap {
				/deep/.u-tabs {
					background-color: #fff;
					// border-bottom: 1px solid #E5E5E5;
					// margin: 0 20rpx;
			
					.u-tabs__wrapper__nav__item {
						flex: 1;
					}
			
					.u-tabs__wrapper__nav__line {
						bottom: 0;
					}
				}
			}

			.data-item {
				// margin-top: 20rpx;
				// height: 220rpx;
				// padding: 10rpx;
				// width: 100%;
				height: 200rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);
				// margin-bottom: 20rpx;
				// padding: 20rpx 20rpx;
				width: calc(100% - 40rpx);
				margin: 0 20rpx 0 20rpx;
				// margin-top: 30rpx;
				.image {
					// padding-left: 10rpx;
					width: 256rpx;
					height: 160rpx;
					border-radius: 5px;
							
					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0 10rpx 0;
				
					.title {
						font-size: 30rpx;
						margin-bottom: 20rpx;
						color: #434343;
						font-weight: 600;
						
						.price-2 {
							color: #999999;
							font-size: 26rpx;
						}
					}
				
					.tag-list {
						margin-bottom: 10rpx;
				
						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							// background-color: #abc6fa;
							margin-right: 10rpx;
							border: 1rpx solid #4BA677;
						}
					}
				
					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}
				
					.price {
						font-size: 32rpx;
						color: #4BA677;
						font-weight: 700;
						margin-right: 10rpx;
					}
				
					.price-2 {
						color: #999999;
						font-size: 26rpx;
					}
				}
			}
		}

		.data-list {
			// /deep/.u-tabs {
			// 	background-color: #fff;
			// 	// border-bottom: 1px solid #E5E5E5;
			// 	// margin: 0 20rpx;

			// 	.u-tabs__wrapper__nav__item {
			// 		flex: 1;
			// 	}

			// 	.u-tabs__wrapper__nav__line {
			// 		bottom: 0;
			// 	}
			// }

			.data-item {
				width: 100%;
				height: 180rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;

				// &:last-of-type {
				// 	margin-bottom: 0;
				// 	padding-bottom: 0;
				// }

				.image {
					width: 156rpx;
					height: 154rpx;
					border-radius: 5px;
					// overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					display: flex;
					margin-left: 20rpx;
					height: 100%;
					flex-direction: column;
					justify-content: space-between;

					.tag-list {
						// margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							border: 1rpx solid #4BA677;
							margin-right: 10rpx;
						}
					}

					.detail-info {
						margin-top: 20rpx;

						.detail-info111 {
							color: #4BA677;
							font-size: 36rpx;
							font-weight: 700;
						}

						.detail-info222 {
							font-size: 20rpx;
							color: #A6A6A6;
						}

						&:first-of-type {
							margin-bottom: 7rpx;
						}
					}
				}

				.btn {
					color: #fff;
					padding: 10rpx 25rpx;
					font-size: 25rpx;
					background: linear-gradient(135deg, #6BD3A6 0%, #56BF89 100%), #56BF89;
					border-radius: 10rpx;
					margin-top: 100rpx;
				}
			}
		}

		.data-list4 {
			// /deep/.u-tabs {
			// 	background-color: #fff;
			// 	// border-bottom: 1px solid #E5E5E5;
			// 	// margin: 0 20rpx;

			// 	.u-tabs__wrapper__nav__item {
			// 		flex: 1;
			// 	}

			// 	.u-tabs__wrapper__nav__line {
			// 		bottom: 0;
			// 	}
			// }

			.data-item {
				margin-top: 20rpx;
				height: 220rpx;
				padding: 10rpx;

				.image {
					width: 300rpx;
					height: 100%;
					position: relative;

					.tag {
						color: #4BA677;
						border: 1rpx solid #4BA677;
						padding: 5rpx 10rpx;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
						font-size: 20rpx;
						border-radius: 0px 0rpx 8rpx 0;
					}

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.count-down {
						height: 35rpx;

						.time {
							font-size: 20rpx;
							display: flex;

							text {
								color: #f63939;
								display: block;
								background-color: #fdc4c3;
								border-radius: 8rpx;
								width: 40rpx;
								text-align: center;
								margin: 0px 6rpx;

								&:first-of-type {
									margin-left: 0;
								}
							}
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.det {
						font-size: 22rpx;
						color: #999999;
					}

					.price {
						font-size: 32rpx;
						color: #ff4811;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}

		.data-list5 {
			// /deep/.u-tabs {
			// 	background-color: #fff;
			// 	// border-bottom: 1px solid #E5E5E5;
			// 	// margin: 0 20rpx;

			// 	.u-tabs__wrapper__nav__item {
			// 		flex: 1;
			// 	}

			// 	.u-tabs__wrapper__nav__line {
			// 		bottom: 0;
			// 	}
			// }

			.footer-xxq {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 30rpx;
				line-height: 33rpx;
				margin-top: 18rpx;
				color: #333333;
				font-weight: 600;
				width: 500rpx;
				padding: 0 20rpx;

			}

			.footer-xxw {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 26rpx;
				line-height: 33rpx;
				margin-top: 10rpx;
				color: #A6A6A6;
				width: 500rpx;
				padding: 0 20rpx;
			}

			.footer-xxr {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				line-height: 33rpx;
				width: 500rpx;
				padding: 0 20rpx;
				margin-top: 40rpx;
			}

			.footer-xxr1 {
				font-size: 26rpx;
				color: #A6A6A6;
			}

			.footer-xxr2 {
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #A6A6A6;
			}

			.goods-item {
				height: 156rpx;
				margin-top: 30rpx;

				.image {
					width: 270rpx;
					height: 156rpx;
					border-radius: 10rpx;
					position: relative;

					/deep/ .u-transition {
						width: 100%;
						height: 100%;
					}

					.image-info {
						position: absolute;
						bottom: 0;
						width: 100%;
						left: 0;
						font-size: 24rpx;
						text-align: center;
						color: white;
						padding: 10rpx 0;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: 0 0 10rpx 10rpx;
					}

					.tag1 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 10rpx 0 15rpx 0;
						// background-image:  #4BA677;
						background-color: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
					}

					.tag2 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 10rpx 0 15rpx 0;
						background-image: linear-gradient(to right, #43e090, #26cd78);
					}

					.tag3 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 10rpx 0 15rpx 0;
						background-image: linear-gradient(to right, #ed7af4, #ec46f6);
					}
				}

				.detail {
					flex: 1;
					width: 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.tag {
						font-size: 22rpx;
						border-radius: 8rpx;
						padding: 5rpx 10rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						color: #4BA677;
						border: 1rpx solid #4BA677;
					}

					.detail-2 {
						color: #a3a3a3;
						font-size: 23rpx;

						image {
							width: 25rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}
					}

					.price {
						color: #ff6a42;

						text {
							font-weight: 700;
							font-size: 37rpx;
						}
					}

					.info {
						color: #a3a3a3;
						font-size: 23rpx;
						margin-left: 15rpx;
						transform: translateY(4rpx);
					}
				}
			}
		}

		.data-list6 {
			// /deep/.u-tabs {
			// 	background-color: #fff;
			// 	// border-bottom: 1px solid #E5E5E5;
			// 	// margin: 0 20rpx;

			// 	.u-tabs__wrapper__nav__item {
			// 		flex: 1;
			// 	}

			// 	.u-tabs__wrapper__nav__line {
			// 		bottom: 0;
			// 	}
			// }

			.item {
				width: 100%;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #e5e5e5;
				margin-top: 31rpx;

				&:nth-of-type(1) {
					.index {
						color: #ffa800;
					}
				}

				&:nth-of-type(2) {
					.index {
						color: #c0c0c0;
					}
				}

				&:nth-of-type(3) {
					.index {
						color: #b2786b;
					}
				}

				&:last-of-type {
					border: none;
				}

				.index {
					font-size: 36rpx;
					font-family: DIN;
					font-weight: bold;
					color: #95a0af;
					margin-right: 40rpx;
				}

				.con {
					height: 100%;
					flex: 1;
					display: flex;
				}

				.image {
					width: 130rpx;
					height: 100%;
					margin-right: 24rpx;
					position: relative;

					.small {
						width: 100%;
						height: 80rpx;
						position: absolute;
						bottom: -20rpx;
						left: 0;
					}
				}

				.box {
					flex: 1;
					width: 0;

					.info-1 {
						margin-bottom: 10rpx;

						.name {
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
						}

						/deep/ .u-tag {
							height: 40rpx;
							margin-left: 20rpx;

							.u-tag__text {
								font-size: 20rpx;
							}
						}
					}

					.info-2 {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							font-weight: 400;
							color: #ff8f05;
							margin-left: 20rpx;
						}
					}

					.info-3 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						white-space: nowrap;
						overflow: hidden;
						width: 100%;
						text-overflow: ellipsis;
					}

					.info-4 {
						font-size: 22rpx;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.data-list7 {
			// /deep/.u-tabs {
			// 	background-color: #fff;
			// 	// border-bottom: 1px solid #E5E5E5;
			// 	// margin: 0 20rpx;

			// 	.u-tabs__wrapper__nav__item {
			// 		flex: 1;
			// 	}

			// 	.u-tabs__wrapper__nav__line {
			// 		bottom: 0;
			// 	}
			// }

			.goods-tab {
				white-space: nowrap;

				.tabs {
					display: inline-block;
					margin-right: 20rpx;

					image {
						height: 90rpx;
						width: 90rpx;
					}

					view {
						font-size: 20rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 10rpx;
						text-align: center;
					}
				}
			}

			.goods-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				justify-content: space-between;

				.item {
					border: 0px solid #e5e5e5;
					width: 48%;
					margin-bottom: 30rpx;

					.image {
						width: 100%;
						position: relative;
						background: #f3f3f3;
						border-radius: 5px 5px 0px 0px;
						height: 300rpx;

						.img {
							width: 80%;
						}

						.top {
							position: absolute;
							left: 0;
							top: -20rpx;
							width: 60rpx;
							height: 68rpx;
						}

						.bottom-text {
							position: absolute;
							right: 20rpx;
							bottom: 10rpx;
							font-size: 22rpx;
							z-index: 3;
							color: #bebebe;
						}
					}

					.bottom {
						border: 1px solid #e5e5e5;
						border-top: none;
						border-radius: 0 0 5px 5px;
						padding: 20rpx;

						.bootom-title {
							font-size: 26rpx;
							font-weight: bold;
							color: #333333;
							margin-bottom: 20rpx;
						}

						.price {
							font-size: 26rpx;
							font-weight: bold;
							color: #ff0f0f;
						}

						.price-2 {
							font-size: 22rpx;
							font-weight: bold;
							margin-left: 6rpx;
							text-decoration: line-through;
							color: #bebebe;
						}
					}
				}
			}
		}

		.data-list8 {
			// /deep/.u-tabs {
			// 	background-color: #fff;
			// 	// border-bottom: 1px solid #E5E5E5;
			// 	// margin: 0 20rpx;

			// 	.u-tabs__wrapper__nav__item {
			// 		flex: 1;
			// 	}

			// 	.u-tabs__wrapper__nav__line {
			// 		bottom: 0;
			// 	}
			// }

			.data-item {
				border-bottom: 1px solid #f2f2f3;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;

				&:last-of-type {
					margin-bottom: 0;
					border-bottom: 0;
				}

				.detail {
					flex: 1;
					width: 0;
					padding-right: 40rpx;

					.detail-1 {
						font-size: 28rpx;
						font-weight: 700;
						margin-bottom: 15rpx;
					}

					.detail-2 {
						font-size: 22rpx;
						color: #7c642a;
						padding: 5rpx 10rpx;
						border-radius: 8rpx;
						background-color: #eedd9b;

						text {
							margin-left: 10rpx;
						}
					}

					.detail-3 {
						margin-left: 20rpx;
						font-size: 22rpx;
						color: #d2d2d2;
					}

					.detail-4 {
						margin-top: 20rpx;
						margin-bottom: 30rpx;
						display: flex;

						.tag {
							color: #ff4747;
							font-size: 22rpx;
							margin-right: 8rpx;
							border-radius: 8rpx;
							padding: 5rpx;
							border: 1px solid #ff4747;
						}
					}

					.detail-5 {
						font-size: 33rpx;
						color: #ff1616;
						font-weight: 700;
					}

					.detail-6 {
						font-size: 20rpx;
						margin-left: 5rpx;
					}
				}

				image {
					width: 240rpx;
					height: 240rpx;
					border-radius: 10px;
				}
			}
		}

		.data-list9 {
			background-color: #EDF5F5;
			
			.loap {
				/deep/.u-tabs {
					background-color: #fff;
					// border-bottom: 1px solid #E5E5E5;
					// margin: 0 20rpx;

					.u-tabs__wrapper__nav__item {
						flex: 1;
					}

					.u-tabs__wrapper__nav__line {
						bottom: 0;
					}
				}
			}

			// margin-top: 20rpx;
			.scroll {
				height: 88vh;
				background-color: #fff;
				// padding: 0 20rpx;
				// width: 96%;
				border-radius: 8rpx;
				// margin-left: 2%;
				margin: 20rpx 20rpx 20rpx 20rpx;
				width: calc(100% - 40rpx);
				
				.data-item {
					margin-bottom: 30rpx;
					margin-top: 20rpx;

					.image {
						position: relative;

						.top-tag {
							position: absolute;
							top: 0;
							left: 0;
							border-radius: 5px 0px 0 0;
							color: white;
							background-color: #abc6fa;
							font-size: 22rpx;
							padding: 5rpx 10rpx;
						}
					}

					.title {
						font-size: 30rpx;
						margin-top: 10rpx;
						// margin-bottom: 10rpx;
					}

					.count-down {
						height: 35rpx;

						.time {
							font-size: 20rpx;
							display: flex;

							text {
								color: #f63939;
								display: block;
								background-color: #fdc4c3;
								border-radius: 8rpx;
								width: 40rpx;
								text-align: center;
								margin: 0px 6rpx;

								&:first-of-type {
									margin-left: 0;
								}
							}
						}

						.price {
							font-size: 22rpx;
							color: #ff571c;

							text {
								font-size: 35rpx;
								font-weight: 700;
							}
						}
					}
				}
			}

		}
	}
</style>